<template>
  <d2-container>
    <template slot="header">
      <div style="display: flex;width: 100%">
        <div class="search" style="display: flex;justify-content: space-around;width: 50%;">
          <div class="search_box" style="display: flex;justify-content: space-around;width: 100%">
            <div >
              <el-input v-model="room.roomid" placeholder="请输入房间ID" ></el-input>
            </div>
            <div>
              <el-input v-model="room.uid" placeholder="请输入用户Id"></el-input>
            </div>
            <div>
              <el-input v-model="room.hid" placeholder="请输入房Id"></el-input>
            </div>
          </div>
          <div class="search_button" style="width: 20%">
            <el-button type="primary" style="width: 100%" @click="search_info">点击查询</el-button>
          </div>
          <div>
            <el-button type="primary" style="margin-left: 20px" @click="Refresh">点击刷新页面</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" style="margin-left: 20px" @click="addRoom">点击添加数据</el-button>
        </div>
      </div>
    </template>
    <template>
      <el-table
              :data="tableData"
              stripe
              style="width: 100%">
        <el-table-column
                prop="roomid"
                label="房间Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="uid"
                label="用户Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="hid"
                label="房Id"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="room_Type"
                label="房间类型"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="maxnum"
                label="最大人数"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="newnum"
                label="已住人数"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="maxnum"
                label="阳台"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.ytai == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="chuag"
                label="床"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.chuang == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="ktiao"
                label="空调"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.ktiao == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="wc"
                label="卫生间"
                align = "center">
          <template slot-scope = "scope">
            {{ scope.row.wc == 1 ? '有':'没有' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="pay"
                label="租金"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="paytype"
                label="支付类型"
                align = "center">
        </el-table-column>
        <el-table-column
                prop="start_time"
                label="起租时间"
                align = "center">
          <template slot-scope="scope">
            {{ new Date(parseInt(scope.row.start_time))|moment('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作"
                width="150px"
                align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRoom(scope.row.roomid)">编辑</el-button>
            <el-button @click="deleteRoom(scope.row.roomid)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template slot="footer">
      <template>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>
      </template>
    </template>


    <!--添加房间 dialog-->
    <el-dialog
            title="添加房间"
            :visible.sync="addRoomdialog"
            align="center">
      <el-form ref="form" :model="addroom" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="房Id">
                <el-input v-model="addroom.hid"></el-input>
              </el-form-item>
              <el-form-item label="用户Id">
                <el-input v-model="addroom.uid"></el-input>
              </el-form-item>
              <el-form-item label="最大人数">
                <el-input v-model="addroom.maxnum"></el-input>
              </el-form-item>
              <el-form-item label="已住人数">
                <el-input v-model="addroom.newnum"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="租金">
                <el-input v-model="addroom.pay"></el-input>
              </el-form-item>
              <el-form-item label="支付类型">
                <el-input v-model="addroom.paytype"></el-input>
              </el-form-item>
              <el-form-item label="房间类型">
                <el-input v-model="addroom.room_Type"></el-input>
              </el-form-item>
              <el-form-item label="起租时间">
                <div class="block">
                  <el-date-picker
                          v-model="addroom.start_time"
                          type="date"
                          placeholder="选择日期"
                          @change="dateChange"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="timestamp">
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="阳台">
              <el-radio-group v-model="addroom.ytai">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="床">
              <el-radio-group v-model="addroom.chuang">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空调">
              <el-radio-group v-model="addroom.ktiao">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="卫生间">
              <el-radio-group v-model="addroom.wc">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-top: 10px;margin-bottom: 20px">
            <el-upload
                    class="upload-demo"
                    action="http://192.168.3.11:7001/room/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="uploadok"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmAdd">确认添加</el-button>
              <el-button @click="addRoomdialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!--修改用户数据-->
    <el-dialog
            title="修改房间数据"
            :visible.sync="editRoomdialog"
            align="center"
    >
      <el-form ref="form" :model="editroom" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="房Id">
                <el-input v-model="editroom.hid"></el-input>
              </el-form-item>
              <el-form-item label="用户Id">
                <el-input v-model="editroom.uid"></el-input>
              </el-form-item>
              <el-form-item label="租金">
                <el-input v-model="editroom.pay"></el-input>
              </el-form-item>
              <el-form-item label="支付类型">
                <el-input v-model="editroom.paytype"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="房间类型">
                <el-input v-model="editroom.room_Type"></el-input>
              </el-form-item>
              <el-form-item label="最大人数">
                <el-input v-model="editroom.maxnum"></el-input>
              </el-form-item>
              <el-form-item label="已住人数">
                <el-input v-model="editroom.newnum"></el-input>
              </el-form-item>
              <el-form-item label="起租时间">
                <div class="block">
                  <el-date-picker
                          v-model="editroom.start_time"
                          type="date"
                          placeholder="选择日期"
                          @change="dateChange"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="timestamp">
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="床">
              <el-radio-group v-model="editroom.chuang">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="空调">
              <el-radio-group v-model="editroom.ktiao">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阳台">
              <el-radio-group v-model="editroom.ytai">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="卫生间">
              <el-radio-group v-model="editroom.wc">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">没有</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-top: 10px;margin-bottom: 20px">
            <el-upload
                    class="upload-demo"
                    action="http://192.168.3.11:7001/room/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="uploadok"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                    show-file-list>
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmEdit">确认修改</el-button>
              <el-button @click="editRoomdialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--删除用户-->
    <el-dialog
            title="警告！"
            :visible.sync="deleteRoomDialog"
            width="30%"
    >
      <span>数据删除后将无法恢复，是否确认删除？</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="deleteRoomId = false">取 消</el-button>
      <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
  export default {
    name: "roomManagent",
    data() {
      return {
        mapdialog: false,
        addRoomdialog: false,
        editRoomdialog: false,
        deleteRoomDialog: false,
        delRoomId: '',
        editRoomId: '',
        room: {
          roomid: '',
          hid: '',
          uid: '',
          room_Type: '',
          maxnum: '',
          newnum: '',
          ytai: '',
          chuang: '',
          ktiao: '',
          wc: '',
          pay: '',
          paytype: '',
          start_time: '',
        },
        addroom: {
          hid: '',
          uid: '',
          room_Type: '',
          maxnum: '',
          newnum: '',
          ytai: '',
          chuang: '',
          ktiao: '',
          wc: '',
          pay: '',
          paytype: '',
          start_time: '',
        },
        editroom: {
          hid: '',
          uid: '',
          room_Type: '',
          maxnum: '',
          newnum: '',
          ytai: '',
          chuang: '',
          ktiao: '',
          wc: '',
          pay: '',
          paytype: '',
          start_time: '',
        },
        tableData: [],
        currentPage:1,
        limit:30,
        total:50,
        fileList: [],
      }
    },
    async created() {
      this.getList();
    },
    methods: {
      async getList() {
        try {
          const res = await this.$api.post('/room/Roomlist', {limit:this.limit,page:this.currentPage});
          this.total = res.data.data.count;
          this.tableData = res.data.data.rows;
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      handleSizeChange(val) {
        this.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      uploadok(res){
        this.fileList.push(res);
        console.log(this.fileList)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
        window.open(
            file.url,'已上传的图片', 'height = 400px, width = 1200px, top = 50px, left = 50px, resizable = yes, location = yes'
        );
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      dateChange(timestamp) {
        this.addroom.start_time = timestamp;
        this.editroom.start_time = timestamp;
      },
      async search_info() {
        try {
          let not_null = [];
          for (let v in this.room) {
            if (this.room[v] !=='') {
              not_null.push(v);
            }
          }
          if (not_null.length >0) {
            const res = await this.$api.post('/room/Roomlist', {
              roomid: this.room.roomid,
              hid: this.room.hid,
              uid: this.room.uid,
              limit:this.limit,
              page:this.currentPage
            });
            if(res.data.state == 1){
              for(let v in this.room) {
                this.room[v] = '';
              }
              this.$message({ message: '查询成功！', type: 'success' });
              this.tableData = res.data.data.rows;
            }else {
              this.$message.error('查询失败！');
              this.getList();
            }
          } else {
            this.$message.error('请至少输入一个字段进行查询！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      addRoom() {
        // 清空表单
        for(let v in this.addroom) {
          this.addroom[v] = '';
        }
        //显示弹窗
        this.addRoomdialog = true;
      },
      async confirmAdd() {
        try {
          let is_null = [];
          for (let v in this.addroom) {
            if (this.addroom[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0 || this.addroom.r_img === '') {
            let r_img = [];
            for (let v of this.fileList) {
              r_img.push(v.url);
            }
            this.addroom.r_img = r_img.join(',');
            const res = await this.$api.post('/room/addRoom', this.addroom);
            if (res.data.state == 1) {
              this.$message({ message: '添加成功！', type: 'success' });
              this.addRoomdialog = false;
              this.getList();
            } else {
              this.$message.error('添加失败！');
              this.getList();
            }
          } else {
            this.$message.error('不能有数据为空！')
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async editRoom(roomid) {
        try {
          this.editRoomId = roomid;
          const res = await this.$api.post('/room/getroombyId', {hid: this.editroom.hid,roomid: this.editRoomId});
          const {
            hid,
            uid,
            room_Type,
            maxnum,
            newnum,
            ytai,
            chuang,
            ktiao,
            wc,
            pay,
            paytype,
            start_time,
            r_img
          } = res.data.data;
          this.editroom = {
            hid,
            uid,
            room_Type,
            maxnum,
            newnum,
            ytai,
            chuang,
            ktiao,
            wc,
            pay,
            paytype,
            start_time,
            r_img};
          this.editRoomdialog = true;
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async confirmEdit() {
        try {
          let is_null = [];
          for (let v in this.editroom) {
            if (this.editroom[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0 || this.editroom.r_img === null) {
            let r_img = [];
            for(let v of this.fileList){
              r_img.push(v.url)
            }
            this.editroom.roomid = this.editRoomId;
            this.editroom.r_img  = r_img.join(',');
            const res = await this.$api.post('/room/updataRoom', this.editroom);
            if (res.data.state == 1) {
              this.$message({ message: '修改成功！', type: 'success'});
              this.editRoomdialog = false;
              this.fileList = [];
              this.getList();
            } else {
              this.$message.error('修改失败！');
              this.getList();
            }
          }else {
            this.$message.error('不能有数据为空！');
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      deleteRoom(roomid) {
        this.deleteRoomDialog = true;
        this.delRoomId = roomid;
      },
      async confirmDelete() {
        try {
          const res = await this.$api.post('/room/delRoom',{roomid: this.delRoomId});
          if(res.data.state == '1'){
            this.$message({ message: '删除成功！', type: 'success' });
            this.deleteRoomDialog = false;
            this.getList();
          } else {
            this.$message.error('删除失败！');
            this.deleteRoomDialog = false;
            this.getList();
          }
        } catch (e) {
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      Refresh() {
        window.location.reload();
      }
    }
  }
</script>

<style scoped>
  .el-form-item__label{
    padding: 0;
  }
</style>
